/* eslint-disable no-param-reassign */
import { ControlVO } from '@ibiz-template/runtime';
import { Ref, ref, watch } from 'vue';
import { GridController } from './grid.controller';

/**
 * 适配element的table的事件
 *
 * @author lxm
 * @date 2022-09-05 21:09:42
 * @export
 * @param {GridController} c
 * @returns {*}
 */
export function useITableEvent(c: GridController): {
  tableRef: Ref<IData | undefined>;
  onRowClick: (data: ControlVO) => void;
  onDbRowClick: (data: ControlVO) => void;
  onSelectionChange: (selection: ControlVO[]) => void;
  onSortChange: (opts: {
    _column: IData;
    prop: string;
    order: 'ascending' | 'descending';
  }) => void;
  handleRowClassName: ({ row }: { row: IData }) => string;
} {
  const tableRef = ref<IData>();
  let forbidChange = false;

  function onRowClick(data: ControlVO): void {
    c.onRowClick(data as ControlVO);
  }

  function onDbRowClick(data: ControlVO): void {
    c.onDbRowClick(data);
  }

  function onSelectionChange(selection: ControlVO[]): void {
    // 选中数据在回显的时候屏蔽值变更事件，否则会递归。
    if (!forbidChange) {
      c.setSelection(selection);
    }
  }

  // 监听选中数据，操作表格来界面回显选中效果。
  watch(
    [(): boolean => c.state.isLoaded, (): IData[] => c.state.selectedData],
    ([isLoaded, newVal]) => {
      if (!isLoaded) {
        return;
      }
      if (c.state.singleSelect) {
        // 单选，选中效果回显。
        if (newVal[0]) {
          tableRef.value!.setCurrentRow(newVal[0], true);
        } else {
          tableRef.value!.setCurrentRow();
        }
      } else {
        forbidChange = true;
        tableRef.value!.clearSelection();
        newVal.forEach(item => tableRef.value!.toggleRowSelection(item, true));
        forbidChange = false;
      }
    },
  );

  // 排序变更回调。
  function onSortChange(opts: {
    _column: IData;
    prop: string;
    order: 'ascending' | 'descending';
  }): void {
    const { prop, order } = opts;
    const fieldName = c.fieldColumns[prop].model.appDEFieldId;
    let order1: 'asc' | 'desc' | undefined;
    if (order === 'ascending') {
      order1 = 'asc';
    } else if (order === 'descending') {
      order1 = 'desc';
    }
    c.setSort(fieldName, order1);
    c.load();
  }

  // todo 用自己的ns类名去压制，把element原来的样式清除
  function handleRowClassName({ row }: { row: IData }): string {
    let activeClassName = '';
    if (c.state.selectedData.length > 0) {
      c.state.selectedData.forEach((data: IData) => {
        if (data === row) {
          // current-row用于多选激活样式与单选保持一致，有背景色
          activeClassName = 'current-row';
        }
      });
    }
    return activeClassName;
  }

  return {
    tableRef,
    onRowClick,
    onDbRowClick,
    onSelectionChange,
    onSortChange,
    handleRowClassName,
  };
}

/**
 * 使用表格分页组件
 *
 * @author lxm
 * @date 2022-09-06 17:09:09
 * @export
 * @param {GridController} c
 * @returns {*}
 */
export function useAppGridPagination(c: GridController): {
  onPageChange: (page: number) => void;
  onPageSizeChange: (size: number) => void;
  onPageRefresh: () => void;
} {
  function onPageChange(page: number): void {
    if (!page || page === c.state.curPage) {
      return;
    }
    c.state.curPage = page;
    c.load();
  }

  function onPageSizeChange(size: number): void {
    if (!size || size === c.state.size) {
      return;
    }
    c.state.size = size;

    // 当page为第一页的时候切换size不会触发pageChange，需要自己触发加载
    if (c.state.curPage === 1) {
      c.load();
    }
  }

  function onPageRefresh(): void {
    c.load();
  }
  return { onPageChange, onPageSizeChange, onPageRefresh };
}
